<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>JSDEMO</title>
    <script src="jquery.min.js"></script>

</head>
<body>
    <!-- // 原生猜数字游戏 1
    <div>
        <h3>猜数字游戏</h3>
        <h5>请输入一个1 ~ 10之间的数字</h5>
        <input  id="input_num" type="text">
        <p></p>
        <button onclick="selectReult()">查看结果</button>
    </div>
    <div id="result_div"> 

    </div> -->

    <!-- // jquery 猜数字游戏 2 -->
    <div>
        <h3>猜数字游戏</h3>
        <h5>请输入一个1 ~ 10之间的数字</h5>
        <input  id="input_num" type="text">
        <p></p>
        <button onclick="selectReultJQ()">查看结果</button>
    </div>
    <div id="result_div"> 

    </div>



    <script>
        // jQuery 猜数字游戏 2
        function selectReultJQ(){
            var RandomNum = 1 + Math.floor(Math.random() * 10);
            // var userInputNum = document.getElementById("input_num").value;
            var userInputNum = jQuery("#input_num").val();
            var msg;
            if(RandomNum == userInputNum){
                msg = "<h4> 恭喜你猜对了 </h4>"               
            }else{
                msg = "<h4> 抱歉 你猜错了 正确答案是："+RandomNum+" </h4>"
            }
            // document.getElementById("result_div").innerHTML = msg;
            jQuery("#result_div").html(msg);
        }



        // 原生猜数字游戏 1
        function selectReult(){
            var RandomNum = 1 + Math.floor(Math.random() * 10);
            console.log(RandomNum);
            var userInputNum = document.getElementById("input_num").value;
            var msg;
            if(RandomNum == userInputNum){
                msg = "<h4> 恭喜你猜对了 </h4>"               
            }else{
                msg = "<h4> 抱歉 你猜错了 正确答案是："+RandomNum+" </h4>"
            }
            document.getElementById("result_div").innerHTML = msg;
        }
    </script>
</body>
</html>